<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 头部 -->
    <header class="hd">
        <div class="tt">户外跑</div>
        <div class="runing df jcsb aic">
            <div class="dv1">运动中</div>
            <div class="dvicon df">
                <div class="ic1 iconfont icon-yinle"></div>
                <div class="ic2 iconfont icon-shezhi1"></div>
            </div>
        </div>

    </header>
    <!-- 主题内容 -->
    <section class="mn">
        <!-- 9999公里 -->
        <div class="menber df">
            <div class="me1">99.99</div>
            <div class="me2">公里</div>
        </div>
        <!-- GPS信号 -->
        <div class="gps df aic">
            <div class="txt">GPS信号度低, 数据精准度低</div>
            <div class="bai"></div>
            <div class="ic iconfont icon-zhinanzhen"></div>
        </div>
        <!-- 配速，用时，千卡 -->
        <div class="icons df">
            <!-- 配速 -->
            <div class="minkm">
                <div class="m1 iconfont icon-gongyezujian-yibiaopan"></div>
                <div class="m2">配速</div>
                <div class="tt">--</div>

            </div>
            <!-- 用时 -->
            <div class="timesp">
                <div class="t1 iconfont icon-changyong_shijian"></div>
                <div class="t2">用时</div>
                <div class="time">00:00:20</div>
            </div>
            <!-- 千卡 -->
            <div class="kio">
                <div class="k1 iconfont icon-81huomiao "></div>
                <div class="k2">千卡</div>
                <div class="k3">3000</div>
            </div>



        </div>
        <!-- 锁和暂停按钮 -->
       <div class="suspend">
         <!-- 暂停按钮 -->
         <div class="btn ">
            <div class="ic iconfont icon-bofang1"></div>
            <div class="tx">暂停</div>
        </div>
        <!-- 锁 -->
        <div class="suo">
            <div class="cc iconfont icon-jiesuo"></div>
        </div>
       </div>
       <!--继续，结束 -->
       <div class="ed1 df dpnone">
        <div class="contnue">继续</div>
        <div class="over">结束</div>

       </div>

    </section>

</body>

</html>